<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <script>
        /*
            箭头函数
                -简写了函数
                -参数小括号内
                -大括号内些代码 和返回值

                赋值式函数 可以被简写

               简写 
                let fn = ()=>{

                }               
                 如果函数只有一个参数，可以省略小括号
                  let fn = a=>{

                 }  
                如果函数体只有一句话，并且那句的代码 的执行结果就是返回值，
                    可以 大括号和return关键字
                     let fn = (a,b)=>a+b
              什么时候使用
                1-赋值式函数
                2-匿名函数--参数是一个函数   
                
                简写了匿名函数


            箭头特殊性***
                 箭头函数内部没有 this，箭头函数的 this 是上下文的 this
                 失去了arguments


                

        */

        // function box(){}
        // var box = function(){}
        // 
        const box = (a, b) => {
            let sum = a + b;
            return sum;
        }

        // const isEven = num => {
        //     return num % 2 == 0;
        // }

        // 参数是num ，返回 num%2求余的结果
        // ***等同于上面的写法
        const isEven = num => num % 2 == 0;

        console.log(isEven(2));


        // setTimeout(function(){},1000)
        setTimeout(() => {

        }, 1000);

        let arr = [9, 8, 7];
        arr.forEach(v => {
            console.log(v);
        });

        arr.forEach(element => {

        });

        // let resArr = arr.map(function (v) {
        //     return v * 10
        // });

        let resArr = arr.map(v => v * 10);
        console.log(resArr);

        // 省略了大括号 会自动return 
        // arr.filter(v => v > 10);

        // 下面的写法是没有返回值的
        // arr.filter(v => {
        //     v > 10
        // })
        arr.filter(v => {
            return v > 10
        });


        // let obj = { a: 1, run: function () { } };
        // 对象里面简写
        let obj = { a: 1, run: () => { } };
        // 事件
        // document.onclick = function () {
        //     console.log(this);//document
        // }

        // 全局 中 this 和window一样的
        console.log(this);
        console.log(window);
        // 让函数 失去自己原本的this，让this的值 跟 函数的上下文（所处于的环境中this是一样）
        // document.onclick = e => {
        //     console.log(this);
        // }


        let btn = document.querySelector('button')
        btn.onclick = function () {
            // console.log(this);//btn

            // document.onclick = e => {
            //     console.log(this);// 箭头函数中this  跟上下文有关
            // }

            setTimeout(() => {
                console.log(this);//btn  箭头函数中this  跟上下文有关
            }, 1000);
        }


        // 失去 arguments
        let fn = () => {

            // 获取所有的实参
            // console.log(arguments); //arguments is not defined
        }
        fn(9, 8, 7);






    </script>

</body>

</html>